<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>团队介绍模块</title>
    <style>
        body {
            background: rgb(245, 247, 250);
            margin: 0;
            padding: 0;
        }

        .teamIntroduction7 * {
            box-sizing: border-box;
        }

        .teamIntroduction7 {
            max-width: 1300px;
            margin: 0 auto;
            padding: 40px 0;
            text-align: center;
            font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
        }

        .teamIntroduction7Top {
            text-align: center;
            font-family: 微软雅黑, SimSun;
            font-size: 18px;
            color: rgb(102, 102, 102);
            margin-bottom: 30px;
            position: relative;
            padding-bottom: 20px;
        }

        .teamIntroduction7Top:after {
            content: "";
            display: block;
            width: 60px;
            height: 1px;
            background: #e0e0e0;
            margin: 20px auto 0;
        }

        .teamIntroduction7Top .title {
            font-size: 22px;
            color: #1966fb;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .teamIntroduction7Top .enTitle {
            font-size: 14px;
        }

        .teamIntroduction7List {
            padding-top: 90px;
            margin-bottom: 64px;
            display: flex;
            flex-wrap: wrap;
            gap: 30px; /* 统一项目间距 */
            justify-content: center;
        }

        .teamIntroduction7List .teamIntroduction7Item {
            width: calc((100% - 60px) / 3); /* 3列布局，减去两边间距 */
            text-align: center;
            margin-bottom: 20px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
        }

        .teamIntroduction7Item .ModuleImageTextGiantContent {
            font-size: 18px;
            color: #7a7a7a;
            background: #fff;
            padding: 50px 15px;
            margin-top: -40px;
            text-align: left;
            border: 3px solid #fff;
            
            transition: border-color 0.3s ease;
        }

        .teamIntroduction7Item .ModuleImageTextGiantContent:hover {
            border: 2px solid #1966fb;
        }

        .teamIntroduction7Item .imgBox {
            text-align: center;
            display: inline-block;
            width: 130px;
            height: 132px;
            border-radius: 50%;
            border: 2px solid transparent;
            transition: border-color 0.3s ease;
            position: relative;
            z-index: 10;
        }

        .teamIntroduction7Item .imgBox img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            box-shadow: 4px 1px 17px rgb(0 0 0 / 4%);
        }

        .teamIntroduction7Item .imgBox .img-hover {
            display: none;
        }

        .teamIntroduction7Item .ModuleImageTextGiantContent .name {
            color: #333;
            font-size: 18px;
            margin-right: 5px;
    font-weight: bold;
        }

        .teamIntroduction7Item .ModuleImageTextGiantContent .nameContent {
            font-size: 12px;
            margin: 0;
            margin-bottom: 26px;
        }

.teamIntroduction7Item .ModuleImageTextGiantContent .nameDec {
    font-size: 14px;
    line-height: 24px;
    margin: 0;
    height: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 装饰线基础样式 */
    padding-bottom: 15px;
    position: relative;
}

/* 固定位置的装饰线（宽度和位置不变） */
.teamIntroduction7Item .ModuleImageTextGiantContent .nameDec:after {
    content: "";
    position: absolute;
    left: 0; /* 左对齐固定 */
    bottom: 0; /* 底部固定 */
    width: 100%; /* 随容器宽度自适应（或固定值如360px） */
    max-width: 380px; /* 限制最大宽度，避免过宽 */
    height: 2px;
    background-color: #e0e0e0; /* 默认浅灰色 */
    transition: background-color 0.3s ease; /* 仅颜色过渡 */
}

/* 鼠标悬停时仅改变颜色，位置和长度不变 */
.teamIntroduction7Item:hover .ModuleImageTextGiantContent .nameDec:after {
    background-color: #1966fb; /*  hover时变色 */
    /* 移除宽度变化，保持位置固定 */
}

        .teamIntroduction7Item .imgBox:hover {
            border: 2px solid #1966fb;
        }

        .teamIntroduction7 .moduleButton {
            border-radius: 50px;
            color: rgb(165, 165, 165);
            border: 1px solid rgb(165, 165, 165);
            font-size: 12px;
            display: inline-block;
            padding: 12px 30px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .teamIntroduction7 .moduleButton:hover {
            background: #1966fb;
            color: #fff;
            text-decoration: none;
            border-color: #1966fb;
        }

        /* 响应式调整 */
        @media (max-width: 992px) {
            .teamIntroduction7List .teamIntroduction7Item {
                width: calc((100% - 30px) / 2); /* 2列布局 */
            }
        }

        @media (max-width: 768px) {
            .teamIntroduction7List {
                padding-top: 60px;
                gap: 20px;
            }
            .teamIntroduction7List .teamIntroduction7Item {
                width: 100%; /* 1列布局 */
                max-width: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="teamIntroduction7">
        <div class="teamIntroduction7Top">
            <div class="title">团队介绍</div>
            <div class="enTitle">Team Introduction</div>
        </div>

        <div class="teamIntroduction7List">
            <!-- 团队成员1 -->
            <div class="teamIntroduction7Item">
                <div class="imgBox">
                    <img src="member1.jpg" alt="团队成员" class="img">
                    <img src="member1-hover.jpg" alt="团队成员" class="img-hover">
                </div>
                <div class="ModuleImageTextGiantContent">
                    <div class="name">张明</div>
                    <p class="nameContent">首席执行官</p>
                    <p class="nameDec">拥有10年行业经验，曾任职于多家知名企业，负责公司整体战略规划与业务发展。</p>
                </div>
            </div>

            <!-- 团队成员2 -->
            <div class="teamIntroduction7Item">
                <div class="imgBox">
                    <img src="member2.jpg" alt="团队成员" class="img">
                    <img src="member2-hover.jpg" alt="团队成员" class="img-hover">
                </div>
                <div class="ModuleImageTextGiantContent">
                    <div class="name">李华</div>
                    <p class="nameContent">技术总监</p>
                    <p class="nameDec">计算机科学博士，专注于技术研发与创新，带领团队攻克多项技术难题。</p>
                </div>
            </div>

            <!-- 团队成员3 -->
            <div class="teamIntroduction7Item">
                <div class="imgBox">
                    <img src="member3.jpg" alt="团队成员" class="img">
                    <img src="member3-hover.jpg" alt="团队成员" class="img-hover">
                </div>
                <div class="ModuleImageTextGiantContent">
                    <div class="name">王芳</div>
                    <p class="nameContent">市场经理</p>
                    <p class="nameDec">市场营销专家，擅长品牌建设与市场推广，曾主导多个成功的营销案例。</p>
                </div>
            </div>

            <!-- 团队成员4 -->
            <div class="teamIntroduction7Item">
                <div class="imgBox">
                    <img src="member4.jpg" alt="团队成员" class="img">
                    <img src="member4-hover.jpg" alt="团队成员" class="img-hover">
                </div>
                <div class="ModuleImageTextGiantContent">
                    <div class="name">赵强</div>
                    <p class="nameContent">设计主管</p>
                    <p class="nameDec">资深设计师，专注于用户体验与视觉设计，追求极致的产品设计理念。</p>
                </div>
            </div>
        </div>

        <a href="#" class="moduleButton">查看全部团队成员</a>
    </div>
</body>
</html>